import React, { Component } from 'react'
import Swiper from 'react-id-swiper';
// import './../../../node_modules/swiper/dist/css/swiper.min.css'
import './LXSwiper.css'

const swiperParams = {
  grabCursor: true,
  loop: true,
  direction: 'horizontal',
  watchOverflow: true,
  spaceBetween: 30,
  observer: true,
  autoplay: {
    delay: 2000,
    disableOnInteraction: false
  },
  // containerClass: 'swiper-container promo',
  rebuildOnUpdate: true,
  shouldSwiperUpdate: true
}

const pagination = {
  el: '.swiper-pagination',
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
  clickable: true,
  currentClass: 'swiper-pagination-current'
}

const navigation = {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev'
}

export default class LXSwiper extends Component {
  render() {
    const { datas, slides, showPagination, direction, delay, isNav } = this.props
    swiperParams.slidesPerView = slides || 1
    swiperParams.pagination = showPagination ? pagination : {}
    swiperParams.direction = direction || 'horizontal'
    swiperParams.autoplay.delay = delay || 2000
    swiperParams.navigation = isNav ? navigation : {}
    return (
      <Swiper {...swiperParams}>
        {datas}
      </Swiper>
    )
  }
}
